<template>
  <div>
    <div :class="{picbox:true,boxbd:pics.length==0}">
      <!--:images="imgs"-->
      <viewer :url="imgs[0].url">
        <img :src="dcPic" width="350" class="img350" />
      </viewer>
      <!-- <el-image :src="dcPic" style="width: 350px; height: 350px" :preview-src-list="[imgs[1].url]"></el-image> -->
      <!-- <el-image style="width: 350px; height: 350px" :preview-src-list="[imgs[0].url]">
        <img :src="dcPic" width="350" class="img350" />
      </el-image> -->
    </div>
    <el-row style="margin-top:10px;">
      <el-col :span="2" style="font-size:45px;">
        <i class="el-icon-arrow-left aleft" @click="onLeft"></i>
      </el-col>
      <el-col :span="20" style="padding-left:4px;">
        <div v-if="pics.length==0" class="lgbox">&nbsp;</div>
        <div
          v-else
          :class="{pleft:true,bd:dcIndex==i}"
          v-for="(img,i) in pics"
          :key="i"
          v-show="i>=min && i<=min+4"
          @mouseover="onLogoMOver(i)"
        >
          <img :src="img.logo" width="50px" />
        </div>
      </el-col>
      <el-col :span="2" style="font-size:45px;">
        <i class="el-icon-arrow-right aright" @click="onRight"></i>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    pics: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      min: 0,
      pictures:[],
      dcIndex: 0, //当前选中的小图下标
      dcPic: "",
      imgs: [
        {
          url: "",
          title: "图片1"
        }
      ]
    };
  },
  created() {
    let nval = this.$props.pics;
    this._SetPic(nval);
  },
  watch: {
    pics: function(nval) {
      this._SetPic(nval);
    }
  },
  methods: {
    _SetPic(nval) {
      this.pictures=nval;
      if (nval.length > 0) {        
        this.dcPic = nval[0].pic;
        this.imgs[0].url = nval[0].maxpic;
      }else{
        this.dcPic='';
        this.imgs[0].url='';
      }
    },
    onLeft() {
      if (this.min - 1 >= 0) {
        this.min--;
      }
    },
    onRight() {
      let m = this.min + 1;
      if (m + 4 < this.pictures.length) {
        this.min++;
      }
    },
    onLogoMOver(i) {
      this.dcIndex = i;
      this.dcPic = this.pictures[i].pic;
      this.imgs[0].url = this.pictures[i].maxpic;
      // console.log(this.dcPic,this.imgs);
    }
  }
};
</script>

<style lang="scss" scoped>
.picbox {
  width: 350px;
  min-height: 350px;
}
.img350{
  cursor: pointer;
}
.boxbd {
  border: 1px solid lightgray;
}
.lgbox {
  width: 50px;
  height: 50px;
  margin-top: 7px;
  border: 1px solid lightgray;
}
.pleft {
  float: left;
  margin-top: 7px;
  margin-right: 3px;
  border: 2px solid white;
}
.pleft:hover {
  cursor: pointer;
  border: 2px solid red;
}
.bd {
  border: 2px solid red;
}
.aleft,
.aright {
  cursor: pointer;
  color: rgb(173, 173, 173);
}
.aleft {
  margin-left: -11px;
}
.aright {
  margin-left: -2px;
}
.aleft:hover,
.aright:hover {
  color: black;
}
</style>